<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总客户数" v-if="this.indexData.member"
                    :total="`${this.indexData.member.member_total_count ? this.indexData.member.member_total_count : 0 }`">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">今日新增</span>
              {{ this.indexData.member.member_curr_count ? this.indexData.member.member_curr_count : 0 }}
            </trend>
            <trend flag="up">
              <span slot="term">昨日新增</span>
              {{ this.indexData.member.member_bef_count ? this.indexData.member.member_bef_count : 0 }}
            </trend>
          </div>
          <template slot="footer">较昨日：
            <span>{{ (this.indexData.member.member_curr_count ? this.indexData.member.member_curr_count : 0) - (this.indexData.member.member_bef_count ? this.indexData.member.member_bef_count : 0) }}</span>
          </template>
        </chart-card>
      </a-col>
      <a-col v-if="this.indexData.online" :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="商城今日销售额"
                    :total="`￥ ${this.indexData.online.total_pay ? this.indexData.online.total_pay : 0 }`">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <mini-area :data-source="this.indexData.onlineMiniAreaData"/>
          </div>
          <template slot="footer">有效订单数量：
            <span> {{ this.indexData.online.total_count ? this.indexData.online.total_count : 0 }}</span></template>
        </chart-card>
      </a-col>
      <a-col v-if="this.indexData.store" :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="门店今日销售额"
                    :total="`￥ ${this.indexData.store.total_pay ? this.indexData.store.total_pay : 0 }`">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <mini-area :data-source="this.indexData.storeMiniAreaData"/>
          </div>
          <template slot="footer">有效订单数量：
            <span> {{ this.indexData.store.total_count ? this.indexData.store.total_count : 0 }}</span></template>
        </chart-card>
      </a-col>
    </a-row>


    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs v-if="this.indexData.barMultidData" default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <!--<div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>今日</a>
              <a>本周</a>
              <a>本月</a>
              <a>本年</a>
            </div>
            <a-range-picker :style="{width: '256px'}" />
          </div>-->
          <a-tab-pane  :loading="loading" tab="销售额" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <!--                <bar title="销售额 (单位：万)" :dataSource="this.indexData.onlineBarData"/>-->
                <bar-multid title="销售额 (单位：万)" :height="height" :dataSource="this.indexData.barMultidData" :fields="this.indexData.barMultidfields"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="本月销售排行榜" :list="this.indexData.rankData"/>
              </a-col>
            </a-row>
          </a-tab-pane>
          <!--          <a-tab-pane v-if="this.indexData.store" loading="true" tab="门店销售额" key="2">
                      <a-row>
                        <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                          <bar title="销售额 (单位：万)" :dataSource="this.indexData.storeBarData"/>
                        </a-col>
                        <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                          <rank-list title="本月销售排行榜" :list="this.indexData.storeRankData"/>
                        </a-col>
                      </a-row>
                    </a-tab-pane>-->
        </a-tabs>
      </div>
    </a-card>


    <a-row v-if="this.indexData.store" :gutter="12">
      <a-card :loading="loading" :class="{ 'anty-list-cust':true }" :bordered="false" :style="{ marginTop: '24px' }">

        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <a-radio-group v-model="indexRegisterType" @change="changeRegisterType">
              <a-radio-button value="date">按日</a-radio-button>
              <a-radio-button value="month">按月</a-radio-button>
            </a-radio-group>
          </div>
          <a-tab-pane tab="销售看板" key="1">
            <a-table :loading="tabLoading" :dataSource="dataSource1" size="default" rowKey="storeId" :columns="columns" :pagination="false"
                     @change="tableChange1">
              <template slot="flowRate" slot-scope="text, record, index">
                <a-progress :strokeColor="getPercentColor(record.finishRate)" :format="getPercentFormat" :percent="getFlowRateNumber(record.finishRate)" style="width:80px" />
              </template>
            </a-table>
          </a-tab-pane>

        </a-tabs>


      </a-card>
    </a-row>


    <!--<a-row>
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="最近一周访问次数统计" :style="{ marginTop: '24px' }">
          <a-row>
            <a-col :span="6">
              <head-info title="今日访问IP数" :content="loginfo.todayIp"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="environment" style="font-size: 24px"  />
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="今日访问次数" :content="loginfo.todayVisitCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="team" style="font-size: 24px"  />
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="访问总次数" :content="loginfo.totalVisitCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="rise" style="font-size: 24px"  />
              </a-spin>
            </a-col>
          </a-row>
          <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
        </a-card>
      </a-col>
    </a-row>-->
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import { getLoginfo, getVisitInfo } from '@/api/api'
import { getAction } from '@/api/manage'
import BarMultid from '@/components/chart/BarMultid'

const dataCol2 = [
  {
    title: '店铺',
    align: 'center',
    dataIndex: 'storeName'
  },
  {
    title: '当月目标',
    align: 'center',
    dataIndex: 'kpiAmount'
  },
  {
    title: '当月营业额',
    align: 'center',
    dataIndex: 'currentOrderAmount',
    sorter: (a, b) => a.currentOrderAmount - b.currentOrderAmount,
  },
  {
    title: '门店营业额',
    align: 'center',
    dataIndex: 'currentStoreAmount',
    sorter: (a, b) => a.currentStoreAmount - b.currentStoreAmount,
  },
  {
    title: '商城销售额',
    align: 'center',
    dataIndex: 'currentOnlineAmount',
    sorter: (a, b) => a.currentOnlineAmount - b.currentOnlineAmount,
  },
  {
    title: '上月营业额',
    align: 'center',
    dataIndex: 'prevOrderAmount',
    sorter: (a, b) => a.prevOrderAmount - b.prevOrderAmount,
  },
  {
    title: '月达成',
    align: 'center',
    dataIndex: 'finishRate',
    scopedSlots: { customRender: 'flowRate' }
  }/*,
  {
    title: '主推产品占比',
    align: 'center',
    dataIndex: 'recommendRate'
  }*/
]

const dataCol1 = [
  {
    title: '店铺',
    align: 'center',
    dataIndex: 'storeName'
  },
  {
    title: '今日目标',
    align: 'center',
    dataIndex: 'kpiAmount'
  },
  {
    title: '今日营业额',
    align: 'center',
    dataIndex: 'currentOrderAmount',
    sorter: (a, b) => a.currentOrderAmount - b.currentOrderAmount,
  },
  {
    title: '门店营业额',
    align: 'center',
    dataIndex: 'currentStoreAmount',
    sorter: (a, b) => a.currentStoreAmount - b.currentStoreAmount,
  },
  {
    title: '商城销售额',
    align: 'center',
    dataIndex: 'currentOnlineAmount',
    sorter: (a, b) => a.currentOnlineAmount - b.currentOnlineAmount,
  },
  {
    title: '昨日营业额',
    align: 'center',
    dataIndex: 'prevOrderAmount',
    sorter: (a, b) => a.prevOrderAmount - b.prevOrderAmount,
  },
  {
    title: '日达成',
    align: 'center',
    dataIndex: 'finishRate',
    scopedSlots: { customRender: 'flowRate' }
  }/*,
  {
    title: '主推产品占比',
    align: 'center',
    dataIndex: 'recommendRate'
  }*/
]

export default {
  name: 'Analysis',
  components: {
    BarMultid,
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo
  },
  data() {
    return {
      height: 380,
      loading: true,
      tabLoading: false,
      center: null,
      //rankList,
      //barData,
      loginfo: {},
      visitFields: ['ip', 'visit'],
      visitInfo: [],
      indexData: {},
      // 表头
      columns: dataCol1,
      dataSource1: [],
      indexRegisterType: 'date',
      url: {
        indexInit: '/home/homePage/indexInit',
        indexInitStore: '/home/homePage/indexInitStore',
      },
      indicator: <a-icon type="loading" style="font-size: 24px" spin/>
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initLogInfo()
    this.initStoreInfo()
  },
  computed: {
    total() {
      return `${this.indexData.member.member_total_count ? this.indexData.member.member_total_count : 0}`
    }
  },
  methods: {
    tableChange1(pagination){
      console.log(pagination)
    },
    changeRegisterType(e) {
      this.indexRegisterType = e.target.value
      if(this.indexRegisterType=="date"){
        this.columns = dataCol1
      }else{
        this.columns = dataCol2
      }
      this.initStoreInfo()
    },
    initLogInfo() {
      getAction(this.url.indexInit).then((res) => {
        if (res.success) {
          this.indexData = res.result
          console.log(this.indexData)
          if (!this.indexData.member) {
            this.indexData.member = {}
          }
        }
      })
      /*getLoginfo(null).then((res)=>{
        if(res.success){
          Object.keys(res.result).forEach(key=>{
            res.result[key] =res.result[key]+""
          })
          this.loginfo = res.result;
        }
      })
      getVisitInfo().then(res=>{
        if(res.success){
           this.visitInfo = res.result;
         }
       })*/
    },
    initStoreInfo() {
      this.dataSource1 = []
      this.tabLoading = true
      getAction(this.url.indexInitStore,{type : this.indexRegisterType}).then((res) => {
        if (res.success) {
          this.dataSource1 = res.result
        }
      }).finally(() => {
        this.tabLoading = false
      })
    },
    getFlowRateNumber(value){
      return Number(value)
    },
    getPercentFormat(value){
      return value+"%"
    },
    getPercentColor(value){
      let p = Number(value)
      if(p>=90 && p<100){
        return 'rgb(244, 240, 89)'
      }else if(p>=100){
        return 'rgb(0, 205, 0)'
      }else{
        return 'rgb(24,144,255)'
      }
    },
  }
}
</script>

<style lang="less" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    font-size: .95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }

  p {
    line-height: 42px;
    margin: 0;

    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}

.anty-list-cust {
  .ant-list-item-meta {
    flex: 0.3 !important;
  }
}

.anty-list-cust {
  .ant-list-item-content {
    flex: 1 !important;
    justify-content: flex-start !important;
    margin-left: 20px;
  }
}
</style>